import React from 'react'

export default class HomeNavList extends React.Component{

    constructor(props) {
        super(props);
        this.state = {
            // 当前选中
            changeNavItem:0,
            homeNavList:[
                {text:'企业口碑', navUrl:'/static/indexImg/koubei@2x.png',info:'Corporate word of mouth'},
                {text:'技术团队', navUrl:'/static/indexImg/tuandui@2x.png',info:'Technical Team'},
                {text:'售后服务', navUrl:'/static/indexImg/shouhou@2x.png',info:'After-sales Service'},
                {text:'荣誉资质', navUrl:'/static/indexImg/rongyu@2x.png',info:'Honor'}
            ]
        }
    }
    render() {
        return (
            <ul className='home_nav_list'>
                {
                    this.state.homeNavList.map((item,index) => {
                        return (
                            <li className= {`home_nav_item ${this.state.changeNavItem === index 
                                        ? 'currentHomeNav':""}`}  key={item.text}
                                onClick={this.changeNavItemStatus.bind(this,index)}>
                                <img className='home_nav_item_img' src={item.navUrl} alt=""/>
                                <div className='home_nav_fr'>
                                    <h2>{item.text}</h2>
                                    <span>{item.info}</span>
                                </div>
                            </li>
                        )
                    })
                }
            </ul>
        );
    }
    changeNavItemStatus(index){
        this.setState({
            changeNavItem: index
        })
    }
}
